<template>
	<el-select :model-value="modelValue + ''" :placeholder="placeholder" :clearable="clearable"
		@change="$emit('update:modelValue', $event)">
		<el-option v-for="data in dataList" :key="data.dictValue" :label="data.dictLabel" :value="data.dictValue"
			:disabled="data.disabled">{{
				data.dictLabel }}</el-option>
	</el-select>
</template>

<script setup lang="ts" name="FastSelect">
import { getDictDataList } from '@/utils/tool'
import { useAppStore } from '@/store/modules/app'
import { watchEffect, reactive, ref, onUnmounted } from "vue";

let appStore = useAppStore()
let dataList = reactive([] as any)
const props = defineProps({
	modelValue: {
		type: [Number, String],
		required: true,
	},
	dictType: {
		type: String,
		required: true
	},
	clearable: {
		type: Boolean,
		required: false,
		default: () => false
	},
	placeholder: {
		type: String,
		required: false,
		default: () => ''
	},
	disableds: {
		type: Array,
		require: false,
		default: () => []
	},


	// 改变传入的属性，触发watchEffect，令其dataList重新取值
	reGetData: {
		type: Boolean,
		require: false,
		default: () => false
	}
})
// 默认数据
dataList = getDictDataList(appStore.dictList, props.dictType)


watchEffect(() => {
	if (props.disableds.length > 0) {
		dataList.forEach((data: any) => {
			data.disabled = false
			props.disableds.forEach(id => {
				if (data.dictValue == id) {
					data.disabled = true
				}
			})
		});
	}else{
		// 清空disableds
		dataList.forEach((data: any) => {
			data.disabled = false
		});
	}


	if (props.reGetData) {
		// 拉取最新数据（在此之前，有关动态数据字典的增删改已经做了全局更新）
		const data = getDictDataList(appStore.dictList, props.dictType);
		// 删除原数组数据，替换为新数据 vue能监听到splice的数据变化，从而更新视图
		dataList.splice(0, dataList.length, ...data)


	}
})

</script>
